<!-- Student_FreeCourseFolderDetailNew.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
	<title>自由课程文件夹下文件</title>
	<link rel="stylesheet" type="text/css" href="../../css/api.css" />
	<link rel="stylesheet" type="text/css" href="../../css/weui.min.css" />
	<link rel="stylesheet" href="../../css/mui.min.css" />
	<link rel="stylesheet" href="../../css/base.css"/>
	<link rel="stylesheet" href="../../css/CFNetPP_Base.css">
	<style type="text/css" media="screen">
		.feeling{
			padding: 10px;
			margin-top: 10px;
		}
		.feeling-text{
			word-break: break-all;
		}
		.mui-table-view-cell>a:not(.mui-btn){
			padding-left: 4px;
		}
		.mui-table-view .mui-media-object.mui-pull-left{
			margin-right: 4px;
		}
		.message_title{
			width: 100%;
		}
		.mui-table-view-cell p{
			height: 24px;
		}
		.file_size{
			margin-left: 40px;
		}
		.download_img{
			width: 20px;
			margin-bottom: 4px;
		}
		.download_progress{
			background-color: rgba(24,180,237,0.25);
			height:100%;
			width:0;
			position:absolute;
			left: 0;
			top:0;
		}
	</style>
</head>
<body>
	<div class="base_style_color " id='BarAppearance' style="height: 22px;width: 100%"></div>
	<div id="header" class="base_navigation_bar base_style_color base_navigation_item_bar">
        <a class="base_left_item" href="#" onclick="backClick()">
            <img class="base_back_icon" src="../../image/icon_jiantou.png" alt="">
        </a>
        <span id="nav_title"></span>
        <a class="base_right_item base_hide_item">
        </a>
    </div>
    <div id="main" class="base_content_div">
		<ul id="file_list" class="mui-table-view" style="margin-top: 10px;">
			<!-- <li class="mui-table-view-cell mui-media">
				<div class="download_progress"></div>
				<a href="javascript:;">
					<img class="mui-media-object mui-pull-left" style="padding: 6px;" src="../../image/icon_wenjia01.png" >
					<div class="mui-media-body">
						<p class="mui-ellipsis base_dark_grey font14">
							<span class="message_title">
								超长文件名超长文件名超长文件名超长文件名超长文件名超长文件名超长文件名超长文件名超长文件名超长文件名超长文件名超长文件名超长文件名超长文件名
							</span>  
						</p>
						<p class='mui-ellipsis base_light_gray font12 content_p'>
							<span class="message_content">
								<span class="file_submit_time">
									2017-01-02 14:20
								</span>
								<span class="file_size">
									1.5MB
								</span>
							</span>
							<img src="../../image/iconO_xiazai.png" alt="" class="download_img">
						</p>
					</div>
				</a>
			</li> -->
		</ul>
    </div>
    <div class="noSign"  id="noData"  hidden="hidden">
		<img src="../../image/icon_img.png" width="60%">
		<p class="font16 top_15 base_dark_grey" >
			暂无数据
		</p>
	</div>
	<div class="loadFailure" hidden="hidden" id="noNet">
		<img src="../../image/icon_img01.png" width="60%">
		<p class="" >
			数据加载失败
		</p>
		<p>
			请检查您的网络
		</p>
		<button type="button" class="mui-btn mui-btn-outlined" onclick="RefreshData()">
			重新加载
		</button>
	</div>
</body>
<script src="../../script/jquery.min.js"></script>
<script src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/MD5.js"></script>
<script type="text/javascript" src="../../script/requestTool.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/attachmentManager.js"></script>
<script type="text/javascript">
	apiready = function(){
		setupCurrentData();
	    loadFolderData();
	    setupNotifi();
	}
	function setupCurrentData(){
		$('#nav_title').text(api.pageParam.cdetailtitle);
	}
	function loadFolderData(){
		var pageParam = api.pageParam;
//		var folderDetailUrl = 'http://base.cfnet.org.cn/course/Videodetail/getfolder';
		var param = {
			uid : $api.getStorage('cfnetppuid'),
			jid : $api.getStorage('cfnetppjxid'),
			cid : pageParam.cid,
			vid : pageParam.id,
			pid : pageParam.pid
		};
		cfnetppPOST(url_getfolder,
		param,
		true,
		function(data, status){

			if (status == 'success') {
				if (data.status == true && data.code == 200) {
					var json = data.json;
					var folderFiles = json;
//					alert(JSON.stringify(folderFiles))
					if (folderFiles != null ) {
						$('.noSign').hide();
		    			$('.loadFailure').hide();
						setupFilesHtml(folderFiles);
					}else{
						api.toast({
						    msg: '暂无数据'
						});
						$('.noSign').show();
		    			$('.loadFailure').hide();
					}
				}else{
					api.toast({
					    msg: '暂无数据'
					});
					$('.noSign').show();
	    			$('.loadFailure').hide();
				}
			}else{
				api.toast({
				    msg: '加载失败'
				});
				$('.noSign').hide();
    			$('.loadFailure').show();
			}
		});
	}
	//设置文件列表
	function setupFilesHtml(list){
	 var files=list.filepath;
		var filesHtmlString = '';
		for (var i = 0; i < files.length; i++) {
			var fileData = files[i];
			var filePath = fileData.realurl;
			var fileid = MD5(filePath);
			var filename = filePath.substr(filePath.lastIndexOf('\/')+1);
			fileData["fileid"] = fileid;
			fileData["filename"] = filename;
			filesHtmlString += fileHtmlString(fileData);
		}
		$('#file_list').html(filesHtmlString);
		setupFileStatus(files);
		setupFileClick();
	}
	function setupFileStatus(datas){
		var fs = api.require('fs');
		for (var i = 0; i < datas.length; i++) {
			var fileData = datas[i];
			var fileid = fileData.fileid;
			var filePath = api.cacheDir + '/freeCourseFile/' + fileid + '/' + fileData.filename;
			fs.exist({
			    path: filePath
			}, function(ret, err) {
			    if (ret.exist) {//存在
			        //ret.directory==true文件夹否为文件
			        $('#' + fileid).removeClass('isNotDownload');
			        $('#' + fileid).addClass('isDownload');
			        $('#' + fileid).hide();
			    } else {//不存在
			    	$('#' + fileid).removeClass('isDownload');
			        $('#' + fileid).addClass('isNotDownload');
			        $('#' + fileid).attr('src', '../../image/iconO_xiazai.png');
			        $('#' + fileid).show();
			    }
			});
		}
	}
	function fileHtmlString(data){
		return '<li class="mui-table-view-cell mui-media folder_file_cell" file_name="'+data.filename+'" file_path="'+data.realurl+'">'+
				'<div id="progress'+data.fileid+'" class="download_progress"></div>'+
				'<a href="javascript:;">'+
					'<img class="mui-media-object mui-pull-left" style="padding: 6px;" src="../../image/icon_wenjia01.png" >'+
					'<div class="mui-media-body">'+
						'<p class="mui-ellipsis base_dark_grey font14">'+
							'<span class="message_title">'+
								data.filename+
							'</span>'+  
						'</p>'+
						'<p class="mui-ellipsis base_light_gray font12 content_p">'+
							'<span class="message_content">'+
								// '<span class="file_submit_time">\
								// 	2017-01-02 14:20\
								// </span>'+//旧接口未返回时间暂不显示
								// '<span class="file_size">\
								// 	1.5MB\
								// </span>'+//旧接口未返回大小暂不显示
							'</span>'+
							'<img id="'+data.fileid+'" src="../../image/iconO_xiazai.png" alt="" class="download_img" file_name="'+data.filename+'" file_path="'+data.filepath+'" hidden="hidden">'+
						'</p>'+
					'</div>'+
				'</a>'+
			'</li>';
	}
	function setupFileClick(){
		$('.folder_file_cell').unbind('click');
		$('.folder_file_cell').click(function(){
			var doc = $(this).attr('file_path');
//			alert(doc);
			var title = $(this).attr('file_name');
			var fileid = MD5(doc);
			if ($('#'+fileid).hasClass('isDownload')) {
				openLocalFile(api.cacheDir + '/freeCourseFile/' + fileid + '/' + title);
			}else{
				var arr = new Array('jpg', 'gif', 'png', 'jpeg', 'bmp');
				var arr1 = new Array('swf', 'mp4');
				var ext = doc.replace(/.+\./, "");
				
				if (arr.toString().indexOf(ext) > -1) {
					openImage(doc);
				} else {
					if (arr1.toString().indexOf(ext) > -1) {
						// api.openWin({useWKWebView:true,
						// 	name : 'Student_FreeCourseVideo',
						// 	url : 'Student_FreeCourseVideo.html',
						// 	pageParam : {
						// 		videourl : doc,
						// 		videoname : title
						// 	}
						// });
						var h = 240;
						api.openFrame({
						    name: 'HTML5VideoPlayer',
						    url: '../Teacher_Teach/HTML5VideoPlayer.html',
						    rect: {
						        x: 0,
						        y: 0,
						        w: 'auto',
						        h: h
						    },
						    pageParam:{
						    	videoUrl : doc
						    },
						    reload : true
						});
					} else {
						api.openWin({useWKWebView:true,
							name : 'Student_FreeCourseDoc',
							url : 'Student_FreeCourseDoc.html',
							pageParam : {
								title : title,
								doc : doc
							}
						});
					}
				}
			}
		});
		$('.download_img').unbind('click');
		$('.download_img').click(function(event){
			var fileid = $(this).attr('id');
			var filename = $(this).attr('file_name');
			var fileurl = $(this).attr('file_path');
			if($(this).hasClass('isNotDownload')){//未下载
				api.sendEvent({
				    name: 'startDownloadFileNotifi',
				    extra: {
				        fileid : fileid,
						filename : filename,
						fileurl : fileurl
				    }
				});
			}
			//停止事件传递
			event.stopPropagation();
		});
	}
	function setupNotifi(){
		api.addEventListener({
		    name: 'downloadFreeCourseFileNotifi'
		}, function(ret, err) {
			var notifiValue = ret.value;
		    var fileId = notifiValue.fileid;
		    var notifiRet = notifiValue.ret;
		    var width = "width:" + notifiRet.percent + "%;";
		    $('#progress' + fileId).css('style', width);
		    if(notifiRet.state == 1){//下载完成
		    	$('#progress' + fileId).css('style', 'width(0)');
		    	$('#' + fileId).removeClass('isNotDownload');
		        $('#' + fileId).addClass('isDownload');
		        $('#' + fileId).hide();
		    }else if(notifiRet.state == 2){//下载失败
		    	$('#progress' + fileId).css('style', 'width(0)');
		    	$('#' + fileId).removeClass('isDownload');
		        $('#' + fileId).addClass('isNotDownload');
		        $('#' + fileId).attr('src', '../../image/iconO_xiazai.png');
		        $('#' + fileId).show();
		    }
		});
	}
	function backClick(){
		api.closeWin();
	}   
	function RefreshData(){
		loadFolderData();
	} 
</script>
</html>
